<template>
  <div style="width:100%">
    <div id="monthChart" ref="lineChart" style="width:100% ;height:18vh;" />
  </div>
</template>

<script>
import { bnrQuery } from '../../api/dataApi'
// import { EventBus } from '../../../utils/eventBus.js'
export default {
  data() {
    return {
      personD: [],
      psname: '',
      colorList: ['#09f2ed', '#0ce889', '#0393f3', '#eee15f'],
      data: [],
    }
  },

  watch: {
    data: {
      handler() {
        this.initChart()
      },
      // immediate: true,
      deep: true,
    },
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      const that = this
      const header = {}
      header['report.tableid'] = 'main@prod_cbkz'
      header['cj'] = this.$route.query.cj
      const params = {
        '@params': JSON.stringify(header),
        pageIndex: 0,
        sortField: 'id',
        sortOrder: 'desc',
      }
      bnrQuery(params)
        .then((res) => {
          this.data = res.data
          this.initChart()
          // console.log('this.data', this.data)
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员-人员！')
        })
    },

    initChart() {
      const myChart = this.$echarts.init(this.$refs.lineChart)
      const option = {
        tooltip: {
          trigger: 'item',
        },
        series: [
          {
            name: '成本控制',
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['45%', '60%'],
            // avoidLabelOverlap: false,
            emphasis: {
              label: {
                show: false,
                fontSize: this.fitChartSize(14),
              },
            },

            label: {
              formatter: function(data) {
                return `${data.name}\n${data.percent.toFixed(1)}%`
              },
              fontSize: this.fitChartSize(11),
            },
            labelLine: {
              show: true, //选中时不显示数据标签引导线
              length: 5,
              lineStyle: {
                width: 1,
                type: 'solid',
              },
            },
            data: this.data.map((item, index) => {
              item.label = {
                color: this.colorList[index],
              }
              return item
            }),
            itemStyle: {
              color: (params) => {
                var index = params.dataIndex
                return this.colorList[index]
              },
            },
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>

<style lang="less" scoped>
.events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}
.notes-month {
  text-align: center;
  font-size: 28px;
}
.notes-month section {
  font-size: 28px;
}
</style>
